 <template>
	<view class="w-100 re h-100">
		<view class="w-100 px-3 pt-3 re z-999">
			<TabBar :list="list" :list_id="list_id" @get_change="get_list"></TabBar>
		</view>
		
		<scroll-view class="scroll-view_H uni-scroll" scroll-y="true" @scrolltolower="lower" :lower-threshold="200">
			<view class="w-100 fs-b-b py-2 px-2-6">
				<view class="w336 circle28 show0 mb-3 ov-hd" v-for="(item,index) in line_list" :key="index" @click="get_details(item)">
						<ImageFile :url="item.thumbnail" className="w-100 h328 re z-99"/>
						<view class="ty-line-info w-100 px-3 h232 pt-3 bg-white re z-999">
							<HornMargin type="left-top" :width="44" :height="40" />
							<view class="font32 h90 fs-n-s t-2 font500 pb-2" style="line-height: 34rpx;">{{item.name}}</view>
							<view class="fs-n-s">
								<view class="f-c-c px-05 h34 mb-1 border circle4 mr-1" v-if="item.photograph">
									<image class="w28 h28" src="../../static/icon_line_2.png"/>
									<view class="font20 t-8 px-05">拍照</view>
								</view>
								<view class="f-c-c px-05 h34 mb-1 border circle4 mr-1">
									<image class="w28 h28"  src="../../static/icon_line_1.png"/>
									<view class="font20 t-8 px-05">停留点x{{item.siteNum}}</view>
								</view>
								<view class="f-c-c px-05 h34 mb-1 border circle4 mr-1">
									<image class="w28 h28"  src="../../static/icon_line_3.png"/>
									<view class="font20 t-8 px-05">{{item.duration}}分钟</view>
								</view>
							</view>
						</view>
					</view>
			</view>
			<view class="w-100 h180"></view>
			<view class="w-100 t-a font24 t-4 pb-1" v-if="is_loading && line_list.length>0">没有更多了</view>
			<view class="w-100 t-a font24 t-3 pt-12 pb-1" v-else>暂无数据</view>
		</scroll-view>
		
	</view>
</template>

<script>
	import TabBar from "./components/tab_bar.vue"
	import HornMargin from "../../components/horn_margin.vue"
	import ImageFile from "../../components/img_file.vue"
	
	import {linePageList} from "../../api/map/map.js"
	
	export default{
		components:{
			TabBar,
			HornMargin,
			ImageFile,
		},
		data(){
			return{
				list_id:'COGNITION',
				list:[
					//路线类型 COGNITION:认知/TREASURE_HUNT:寻宝/RIDDLE:解谜/THEME:主题
					{
						title:"认知路线",
						code:"COGNITION"
					},
					{
						title:"寻宝路线",
						code:"TREASURE_HUNT"
					},
					{
						title:"解谜路线",
						code:"RIDDLE"
					},
					{
						title:"主题路线",
						code:"THEME"
					}
				],
				query:{
					pageSize:12,
					currentPage:1,
					lineType:''
				},
				is_loading:false,
				height:0,
				line_list:[]
			}
		},
		created() {
			this.get_data()
			this.height = uni.getStorageSync("map_height")
		},
		methods:{
			get_data(){
				this.query.lineType = this.list_id
				linePageList(this.query).then(res=>{
					if(res.code === '0'){
						this.line_list = res.body?.records || []
					}
				})
			},
			get_list(val){
				this.list_id = val.code
				this.get_data()
			},
			get_details(val){
				uni.setStorageSync('details',val)
				uni.navigateTo({
					url:`./line/details?id=${val.id}`
				})
			},
			lower(){
				return
				const that = this
				if(!this.is_loading){
					this.is_loading = true
					setTimeout(()=>{
						for(let i =0;i<3;i++){
							that.line_list.push({})
						}
						that.is_loading = false
					},1500)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-view_H{
		position: absolute;
		top: 152rpx;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 9;
	}
	.ty-line-info{
		border-radius: 0 28rpx 28rpx 28rpx;
		margin-top: -32rpx;
	}
</style>
